const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const devMode = process.env.NODE_ENV !== 'production'
const extractLoader = devMode ? 'style-loader' : MiniCssExtractPlugin.loader

const webpackConfig = {
    entry: {
        index: './src/index.js'
    },
    output: {
        filename: '[name].[hash].bundle.js', //chunkhush 只用于生产环境,
        library: 'myLibrary',
        chunkFilename: '[name].[hash].chunk.js',
        path: path.resolve(__dirname, 'dist')
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: "initial",
                    minChunks: 2,
                    maxInitialRequests: 5,  // The default limit is too small to showcase the effect
                    minSize: 0              // This is example is too small to create commons chunks
                },
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "initial",
                    name: "vendors",
                    priority: 10,
                    enforce: true,
                    chunks: 'all'
                }
            }
        }
    },
    devServer: {
        host: '0.0.0.0', 
        contentBase: 'dist',
        stats: {
            errors: true,               //echo errors 
            warnings: false,            //not echo warnings
            modules: false,             //not echo modules info
            reasons: true,              //reason of import module
            performance: true,
            children: false
        },
        hot: true,
        port: 2233,
        proxy: {
            '/admin': {
                target: 'http://localhost:7878',
                pathRewrite: {'^/admin' : '/admin'}
                //pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
                //pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ["babel-loader"],
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [extractLoader, {
                    loader:'css-loader',
                    options:{
                        importLoaders:1,
                         modules:false
                    }
                }]
            },
            {
                test: /\.less$/,
                use: [extractLoader, 'css-loader', {
                    loader: 'less-loader',
                    options: { 
                        javascriptEnabled: true,
                        modifyVars: {
                            'primary-color': '#a91f24',
                            'link-color': '#a91f24',
                            'border-radius-base': '2px'
                        },
                    }
                }]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        }),
        new MiniCssExtractPlugin({
            filename: devMode ? '[name].css' : '[name].[hash].css',
            chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
        }),
         new HtmlWebpackPlugin({
            template: `${__dirname}/src/index.html`,
            filename: 'index.html',
            title: 'webpack react',
            inject: 'body',
            meta: { viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no' }
        })
    ]
}

module.exports = webpackConfig